import * as React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import TopicIndex from './components/topic/index';
import TopicShow from './components/topic/show'
import { Layout, Menu } from 'antd';
import './App.css';
const { Header, Footer, Content } = Layout;

class App extends React.Component {
	routes = () => {
		return (
			<div className={"main"}>
				<Route exact path="/" component={TopicIndex} />
				<Route path="/topic/:id" component={TopicShow} />
			</div>
		);
	}

	render() {
		return (
			<Router>
				<Layout>
					<Header>
						<Menu
							theme="dark" 
							mode="horizontal" 
							defaultSelectedKeys={['1']} 
							style={{ lineHeight: '64px' }}>

							<Menu.Item key="1">
								<Link to={'/'}>首页</Link>
							</Menu.Item>
							
						</Menu>
					</Header>

					<Content>{this.routes()}</Content>
					
					<Footer>Footer</Footer>
				</Layout>
			</Router>
		);
	}
}

export default App;
